<template>
  <div>
    <div class="updateVideoTitle">
      <van-icon name="arrow-left" style="vertical-align: -15%" @click="goBack"/>
      更新视频
    </div>
    <div class="updateVideoMainPart">
      <div :class="{ updateVideoMainPartItem: (currentTemplateSetting.md !== '' || currentTemplateSetting.mdText !== ''),
                     updateVideoMainPartItemGrey: (currentTemplateSetting.md === '' && currentTemplateSetting.mdText === '') } "
           @click="goToUpdateStep(1)">
        更新门店信息
        <img src="@/assets/img/material/polygon.png" v-if="currentTemplateSetting.md !== '' || currentTemplateSetting.mdText !== ''" class="polygon">
        <img src="@/assets/img/material/polygonGrey.png" v-else class="polygon">
      </div>
      <div :class="{ updateVideoMainPartItem: (currentTemplateSetting.cp !== '' || currentTemplateSetting.cpText !== ''),
                     updateVideoMainPartItemGrey: (currentTemplateSetting.cp === '' && currentTemplateSetting.cpText === '') } "
           @click="goToUpdateStep(2)">
        更新产品信息
        <img src="@/assets/img/material/polygon.png" v-if="currentTemplateSetting.cp !== '' || currentTemplateSetting.cpText !== ''" class="polygon">
        <img src="@/assets/img/material/polygonGrey.png" v-else class="polygon">
      </div>
      <div :class="{ updateVideoMainPartItem: (currentTemplateSetting.hj !== '' || currentTemplateSetting.hjText !== ''),
                     updateVideoMainPartItemGrey: (currentTemplateSetting.hj === '' && currentTemplateSetting.hjText === '') } "
           @click="goToUpdateStep(3)">
        更新环境信息
        <img src="@/assets/img/material/polygon.png" v-if="currentTemplateSetting.hj !== '' || currentTemplateSetting.hjText !== ''" class="polygon">
        <img src="@/assets/img/material/polygonGrey.png" v-else class="polygon">
      </div>
      <div :class="{ updateVideoMainPartItem: (currentTemplateSetting.roomPath !== '' || currentTemplateSetting.roomText !== ''),
                     updateVideoMainPartItemGrey: (currentTemplateSetting.roomPath === '' && currentTemplateSetting.roomText === '') } "
           @click="goToUpdateStep(4)">
        更新直播链接
        <img src="@/assets/img/material/polygon.png" v-if="currentTemplateSetting.roomPath !== '' || currentTemplateSetting.roomText !== ''" class="polygon">
        <img src="@/assets/img/material/polygonGrey.png" v-else class="polygon">
      </div>
      <div :class="{ updateVideoMainPartItem: (currentTemplateSetting.bgm !== '' || currentTemplateSetting.bgmName !== ''),
                     updateVideoMainPartItemGrey: (currentTemplateSetting.bgm === '' && currentTemplateSetting.bgmName === '') } "
           @click="goToUpdateStep(5)">
        更新背景音乐
        <img src="@/assets/img/material/polygon.png" v-if="currentTemplateSetting.bgm !== '' || currentTemplateSetting.bgmName !== ''" class="polygon">
        <img src="@/assets/img/material/polygonGrey.png" v-else class="polygon">
      </div>
    </div>
    <div style="text-align: center">
      <!-- <van-button class="confirmUpdateBtn"
                  :disabled="isSubmitted()"
                  @click="confirmUpdate">
        确认更新
      </van-button> -->
    </div>
  </div>
</template>

<script>
// import { createTemplate, getBgmList, queryTemplate } from '../../../api/pms';

export default {
  name: 'updateVideo',
  data () {
    return {
      // ---当前模板配置---
      currentTemplateSetting: {},
      // 所有背景音乐
      allBgm: []
    };
  },
  created () {
    window.addEventListener('popstate', (e) => {
      // 根据自己的需求实现自己的功能
      const isSubmitted = this.isSubmitted();
      if (!isSubmitted) {
        this.$toast({
          message: '您当前有未提交的更新素材，请先点击【确认更新】按钮提交新素材！'
        });
        history.pushState(null, null, document.URL);
      }
    }, false);
    this.queryTemplate();
    this.getBgmList();
  },
  methods: {
  //   // 更新素材是否已提交
  //   isSubmitted () {
  //     const organId = this.$store.state.userInfo.organId;
  //     const changedStep = this.$store.state.changedStep;
  //     const sameArr = changedStep.filter(item => item.organId === organId);
  //     if (sameArr.length !== 0) {
  //       return false;
  //     } else {
  //       return true;
  //     }
  //   },
  //   goBack () {
  //     const isSubmitted = this.isSubmitted();
  //     if (!isSubmitted) {
  //       return this.$toast({
  //         message: '您当前有未提交的更新素材，请先点击【确认更新】按钮提交新素材！'
  //       });
  //     }
  //     this.$router.push('/store/material/index');
  //   },
    goToUpdateStep (step) {
      console.log('hhah');
      this.$router.push({
        name: 'materialUpdateVideoDetail',
        params: {
          step: step,
          currentTemplateSetting: this.currentTemplateSetting,
          allBgm: this.allBgm
        }
      });
    },
  //   // 查询企业模板配置
  //   async queryTemplate () {
  //     const queryTemplateForm = {
  //       organId: this.$store.state.userInfo.organId
  //     };
  //     const res = await queryTemplate(queryTemplateForm);
  //     console.log('queryTemplate-->', res);
  //     if (!res.code) {
  //       this.currentTemplateSetting = res.data;
  //     }
  //   },
  //   // 查询支持的bgm列表
  //   async getBgmList () {
  //     const getBgmListForm = {
  //       pageSize: 20,
  //       pageNum: 1
  //     };
  //     const res = await getBgmList(getBgmListForm);
  //     console.log('getBgmList-->', res);
  //     if (!res.code) {
  //       this.allBgm = res.data.records;
  //     }
  //   },
  //   // 生成预览视频
  //   async createTemplate () {
  //     const createTemplateForm = {
  //       organId: this.$store.state.userInfo.organId
  //     };
  //     const res = await createTemplate(createTemplateForm);
  //     console.log('createTemplate-->', res);
  //     if (res.code === 0) {
  //       this.$toast.success('更新视频成功！');
  //       this.$store.commit('clearChangedStep', this.$store.state.userInfo.organId);
  //       this.$router.push('/store/material/index');
  //     }
  //   },
  //   // 确认更新
  //   confirmUpdate () {
  //     if (this.currentTemplateSetting.md === '' && this.currentTemplateSetting.cp === '' && this.currentTemplateSetting.hj === '') {
  //       this.$toast.fail('在前三个步骤中您至少需要上传一张图片或一个视频！');
  //       return false;
  //     }
  //     const changedStepArr = this.$store.state.changedStep;
  //     if (changedStepArr.length > 0) {
  //       if (changedStepArr.length === 1 && changedStepArr[0] === 4) {
  //         this.$toast.success('更新视频成功！');
  //         this.$store.commit('clearChangedStep', this.$store.state.userInfo.organId);
  //         this.$router.push('/store/material/index');
  //       } else {
  //         this.createTemplate();
  //       }
  //     }
  //   }
  }
};
</script>

<style scoped>
  .updateVideoTitle {
    height: 44px;
    padding-left: 20px;
    color: #333333;
    font-size: 14px;
    line-height: 44px;
  }

  .updateVideoMainPart {
    padding: 0 20px;
    line-height: 20px;
  }

  .updateVideoMainPartItem {
    background: #FFF7EB;
    border-radius: 4px;
    color: #603900;
    font-size: 12px;
    padding: 12px 0 12px 15px;
    margin-top: 10px;
  }

  .updateVideoMainPartItemGrey {
    background: #F5F5F5;
    border-radius: 4px;
    color: #666666;
    font-size: 12px;
    padding: 12px 0 12px 15px;
    margin-top: 10px;
  }

  .polygon {
    width: 8px;
    height: 12px;
    float: right;
    margin: 3px 15px 0 0;
  }

  .confirmUpdateBtn {
    margin-top: 20px;
    color: #FFFFFF;
    border: 1px solid #fd9800;
    border-radius: 4px;
    background-color: #fd9800;
  }
</style>
